/*
 * @Author: LGX
 * @Date: 2022-03-30 09:51:05
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-11 22:10:03
 * @FilePath: \erp-management-system\src\views\seas\CustomerList.jsx
 * @Description: 客户公海列表
 * 
 */
import React, { useState, useEffect, memo } from 'react';
import { Table, ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import PubSub from 'pubsub-js'
import { useMatch, useNavigate } from 'react-router-dom';
import Serch from '../../components/customerseas/SerchList';
import ManageBtn from '../../components/customerseas/ManageBtn';
import Pagination from '../../components/customerseas/Pagination';
import MyButton from '../../components/customerseas/MyButton'
import UserInfoModal from '../../components/customerseas/UserInfoModal'
import axios from '../../utils/http'
const CustomerList = () => {
    //表格中当前选中的数据
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            setselectTable(selectedRowKeys)
        },
    };
    const pathCustomerList = useMatch('/seas/list')
    const pathCustomerRepeat = useMatch('/seas/audit')
    const pathCustomerAudit = useMatch('seas/repeat')
    //判断从哪个路由来
    function statu() {
        let status
        if (pathCustomerList) {
            status = 1
        } else if (pathCustomerRepeat) {
            status = 2
        } else if (pathCustomerAudit) {
            status = 3
        }
        return status
    }
    const navigate = useNavigate()
    //删除操作按钮状态
    const [statuId, setStatuId] = useState(false);
    //查看信息modal框是否显示的状态值
    const [isUserModal, setUserModal] = useState(false);
    //修改信息模块
    const [isUpdateModal, setUpdateModal] = useState(false);
    const [userInfo, setUserInfo] = useState({});
    //当前勾选的数据
    const [selectTable, setselectTable] = useState();
    //表格标题
    const columns = [
        {
            title: '客户名称',
            dataIndex: 'customerUsername',
            render: (text, hang) => <a onClick={() => {
                setUserModal(true)
                setUserInfo(hang)
            }}>{text}</a>,
        },
        {
            title: '联系人',
            dataIndex: 'customerName',
        },
        {
            title: '手机号',
            dataIndex: 'phoneNumber',
        },
        {
            title: '客户类型',
            dataIndex: 'customerTypeTitle',
        },
        {
            title: '客户来源',
            dataIndex: 'customerSourceTitle',
        },
        {
            title: '录入时间',
            dataIndex: 'entryTime',
        },
        // {
        //     title: '最后更新',
        //     dataIndex: 'updateTime',
        // },
        {
            title: '申请人',
            dataIndex: 'employeeName',
        },
        {
            title: '录入者',
            dataIndex: 'employeeInputName',
        },
        {
            title: '管理',
            dataIndex: 'manager',
            render: (i,name) => <ManageBtn deleStatus={deleStatus} permission={1} userInfo={name}/>
        }
    ];
    function deleStatus (){
        setStatuId(!statuId)
    }
    //页码状态
    const [pagination, setPagination] = useState({ currentPage: '1', pageSize: '10' });
    //客户公海列表
    const [customerList, setCustomerList] = useState([]);
    useEffect(() => {
        axios({
            url: 'gongHai/findPublicCustomerListByLikeSome',
            method: 'get',
            params: { ...pagination, status: statu() },
            headers: {
                isLoading: false
            }
        }).then(res => {
            console.log(res.data);
            setCustomerList(res.data)
        })
        //订阅消息
        PubSub.subscribe("searchList", (msg, data) => {
            console.log(data);
            setCustomerList(data)
        })
    }, [pagination, selectTable,statuId]);
    return (
        <div style={{ position: 'relative', minWidth: '1200px' }}>
            <Serch />
            <div>
                <Table
                    sticky
                    showSizeChanger={false}
                    pagination={false}
                    dataSource={customerList.data}
                    columns={columns}
                    rowKey={(item) => item.id}
                    rowSelection={{
                        type: 'checkbox',
                        ...rowSelection,
                    }}
                    locale={{
                        emptyText: () => (<><span>抱歉，暂无相关记录
                        </span>
                            {pathCustomerList ? <MyButton onClick={() => navigate('/seas/add')} color='#149e83' title='添加一个公海客户吧' /> : ''}
                        </>)
                    }}
                >
                </Table>
                {/* 分页栏 */}
                <ConfigProvider locale={zhCN}>
                    <Pagination customerList={customerList} setPagination={setPagination} selectTable={selectTable} setselectTable={setselectTable} />
                </ConfigProvider>

            </div>
            <UserInfoModal userInfo={userInfo} isUserModal={isUserModal} setUserModal={setUserModal} />
        </div>
    );
}

export default memo(CustomerList);